<template>
  <Dialog
    v-model="show"
    @confirm="handleSubmit"
    @close="close"
    :title="props.data?.id ? t('settlementAccount.editTitle') : t('settlementAccount.addTitle')"
    width="600px"
  >
    <div>
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="p20"
      >
        <el-form-item :label="t('settlementAccount.bankAccountName')" prop="bankAccountName">
          <el-input
            v-model="form.bankAccountName"
            :placeholder="t('settlementAccount.bankAccountNamePlaceholder')"
            maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item :label="t('settlementAccount.bankAccountNo')" prop="bankAccountNo">
          <el-input
            v-model="form.bankAccountNo"
            :placeholder="t('settlementAccount.bankAccountNoPlaceholder')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="t('settlementAccount.bankName')" prop="bankName">
          <el-input
            v-model="form.bankName"
            :placeholder="t('settlementAccount.bankNamePlaceholder')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="t('settlementAccount.bankAddress')" prop="bankAddress">
          <el-input
            v-model="form.bankAddress"
            :placeholder="t('settlementAccount.bankAddressPlaceholder')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="t('settlementAccount.setDefault')" prop="flag">
          <el-switch
            v-model="form.flag"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
      </el-form>
    </div>
  </Dialog>
</template>
<script setup>
import { ref, watch, reactive } from "vue";
import { useI18n } from "vue-i18n";
import Dialog from "@/components/dialog.vue";
import { ElMessage } from "element-plus";
import Api from "@/config/api/api";

const { t } = useI18n();

const show = defineModel();
const formRef = ref(null);

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});
const emit = defineEmits(["success"]);

const form = ref({
  bankAccountName: "",
  bankAccountNo: "",
  bankName: "",
  bankAddress: "",
  flag: 0,
});

const rules = reactive({
  bankAccountName: [
    { required: true, message: t('settlementAccount.bankAccountNameRequired'), trigger: "blur" },
  ],
  bankAccountNo: [
    { required: true, message: t('settlementAccount.bankAccountNoRequired'), trigger: "blur" },
  ],
  bankName: [{ required: true, message: t('settlementAccount.bankNameRequired'), trigger: "blur" }],
  bankAddress: [
    { required: true, message: t('settlementAccount.bankAddressRequired'), trigger: "blur" },
  ],
});

watch(
  () => show.value,
  (val) => {
    if (val) {
      if (props.data?.id) {
        form.value = { ...props.data };
      } else {
        form.value = {
          bankAccountName: "",
          bankAccountNo: "",
          bankName: "",
          bankAddress: "",
          flag: 0,
        };
      }
    }
  }
);

const handleSubmit = async () => {
  const valid = await formRef.value.validate().catch(() => false);
  if (!valid) {
    ElMessage.error(t('settlementAccount.formIncomplete'));
    return;
  }
  const port = props.data?.id ? Api.tenantAccount_edit : Api.tenantAccount_add;
  const res = await port(form.value);
  if (res.status == 200) {
    ElMessage.success(t('settlementAccount.operationSuccess'));
    emit("success");
    show.value = false;
  }
};

const close = () => {
  formRef.value?.resetFields();
  show.value = false;
};
</script>
<style lang="scss" scoped>
.h-500 {
  height: 500px;
}
.lht-38 {
  line-height: 38px;
}
.w-120 {
  width: 120px;
}
</style>
